<script lang="ts" setup>
import { useCounterStore } from "@/stores/counter";
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import { getVisitorInfo, modifyVisitor, deleteVisitor } from "@/api/visitor";
import { useRouter } from "vue-router";

const useStore = useCounterStore();
const router = useRouter();
const code: Ref<string> = ref("");
// 就诊人列表
interface IVisitorList {
  age: number;
  cardid: string;
  gender: string;
  name: string;
  username: string;
}
const visitor: Ref<IVisitorList> = ref({
  age: 0,
  cardid: "",
  gender: "",
  name: "",
  username: "",
});

// 挂载后
const tel: Ref<string> = ref("");
onMounted(() => {
  getVisitorInfo({ username: useStore.userId }).then((res) => {
    visitor.value = res.data[0];
    tel.value = visitor.value.username;
  });
});

// 点击保存修改
function modifyClick() {
  modifyVisitor({ username: tel.value, cardid: visitor.value.cardid }).then(
    (res) => {
      router.push("/visitormanagement");
    }
  );
}
// 删除就诊人
function deleteClick() {
  deleteVisitor({ cardid: visitor.value.cardid }).then((res) => {
    // console.log(res);
    router.push("/visitormanagement");
  });
}
</script>

<template>
  <div>
    <van-nav-bar left-arrow @click-left="$router.back()" />
    <div class="main">
      <h1>就诊人管理</h1>
      <h2>您可以修改就诊人的手机号码</h2>
      <van-field
        label="姓名"
        :model-value="
          visitor.name + ' | ' + visitor.gender + ' | ' + visitor.age
        "
        disabled
      />
      <van-field label="证件号码" :model-value="visitor.cardid" disabled />
      <van-field v-model="tel" type="tel" label="手机号" />
      <van-field v-model="code" type="tel" placeholder="验证码" />
    </div>
    <div class="btn_box">
      <van-button round type="default" @click="deleteClick">删除就诊人</van-button>
      <van-button round type="primary" @click="modifyClick">保存</van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #f7fdff;
}
.main {
  padding: 0.1rem 0.3rem;
  h1 {
    font-size: 0.3rem;
    margin-bottom: 0.2rem;
  }
}
.btn_box{
  display: flex;
  justify-content: space-between;
  margin: 5% 20%;
}
</style>
